<template>
    <div class="main">
       <div class="title">
           <a class="t1">Hi,欢迎来到奖多多!</a>
           <a class="t2">快速登录</a>
           <a>免费注册</a>
           <a class="t4">站点首页</a>
           <a class="t3">帮助文档</a>
       </div>
       <div class="decorate">
           <div class="decoratelr">
               <img src="../assets/image/logo.jpg" width="100%" height="100%">
           </div>
           <div class="scroll-text">
               <marquee behavior="" direction="right" scrollamount="7" vspace="15" hspace="15">欢迎来到奖多多，你的支持是我前进的动力，感谢！</marquee>
           </div>
           <div class="decoratelr">
               <p class="ke1">客服热线</p>
               <dt class="ke2">188-0277-6249</dt>
           </div>
       </div>
       <div class="nav">
           <div class="chooseType">选择彩种</div>
           <div class="navbar">
               <a class="navsyml31 navsy">首页</a>
               <a class="navsyml1 navsy">比赛直播</a>
               <a class="navsy navsyml1">开奖公告</a>
               <a class="navsyml1 navsy">走势图表</a>
               <a class="navsyml1 navsy">手机购彩</a>
           </div>
       </div>
       <div class="cont">
           <div class="fl fir">
               <div class="choosezl">
                   <div class="choosezlCh">
                       <img src="../assets/image/leftside/1.png" class="lsimg fl">
                       <a class="lsimgcon lsimgtxt">竞猜足球</a>
                       <a class="lsimgl lsimgtxt">单关固赔</a>
                   </div>
                   <div class="choosezlCh">
                        <img src="../assets/image/leftside/2.png" class="lsimg fl">
                        <a class="lsimgcon lsimgtxt">竞猜篮球</a>
                        <a class="lsimgl lsimgtxt">NBA天天猜</a>
                   </div>
                   <div class="choosezlCh">
                        <img src="../assets/image/leftside/3.png" class="lsimg fl">
                        <a class="lsimgcon lsimgtxt">双色球</a>
                        <a class="lsimgl lsimgtxt">2元可中1000万</a>
                   </div>
                   <div class="choosezlCh">
                        <img src="../assets/image/leftside/4.png" class="lsimg fl">
                        <a class="lsimgcon lsimgtxt">大乐透</a>
                        <a class="lsimgl lsimgtxt">3亿大奖池</a>
                   </div>
                   <div class="choosezlCh">
                        <img src="../assets/image/leftside/5.png" class="lsimg fl">
                        <a class="lsimgcon lsimgtxt">福彩3D</a>
                        <a class="lsimgl lsimgtxt">猜3号易中奖</a>
                   </div>
               </div>
               <div></div>
               <p></p>
               <div></div>
           </div>
           <div class="contSecondChild fl .overflowHidden">
               <slide-show :slides="slides"></slide-show>
               <div id="trumpet">
                    <p> <i class="glyphicon glyphicon-volume-up"></i>本站累计中奖：<span>29亿7463万</span>，还不快来！</p>
                </div>
                <bet></bet>
                <div>随机选择彩票</div>
           </div>
           <div class="contThirdChild">
               <rightSide></rightSide>
           </div>
       </div>
    </div>
</template>
<script>
import slideShow from './slideShow'
import rightSide from './container/RightSide'
import bet from './container/Bet'
export default {
    name: "trumpet",
    components: {
        slideShow,
        rightSide,
        bet
    },
  data () {
    return {
      slides: [
        {
          src: require('../assets/image/contair/f2.jpg'),
          title: 'xxx1',
        },
        {
          src: require('../assets/image/contair/f1.jpg'),
          title: 'xxx2',
        },
        {
          src: require('../assets/image/contair/f2.jpg'),
          title: 'xxx3',
        },
        {
          src: require('../assets/image/contair/f1.jpg'),
          title: 'xxx4',
        },
        {
          src: require('../assets/image/contair/f2.jpg'),
          title: 'xxx5',
        }
      ]
    }
  }
}
</script>
<style>
a,html,body,p,h1,h2,div,image{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
    .overflowHidden {
        overflow: hidden;
    }
    .swiper-container{
        width: 100%;
        height: 300px;
        background-color: #DDDDDD;
    }
.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
 /*文字设置*/
  .decorate .scroll-text{
    width: 70%;
    height: 80px;
    top: 39px;
    left: 240px;
    font-size: 14px;
    color: #e23a3a;
    text-shadow: 1px 1px 2px #000, 2px 2px 2px #ff0, 3px 3px 2px #ff0, 4px 4px 2px #ff0;
    /*有继承性*/
    animation: changeText 3s ease infinite;
    float: left;
  }

  /*动画*/
  @keyframes changeText{
    0%{ font-size: 21px; color: orange; font-style: italic}
    20%{ font-size: 24px; color: yellow; font-style: oblique}
    40%{ font-size: 27px; color: green; font-style: normal}
    /*indigo: 靛蓝|染料*/
    60%{ font-size: 30px; color: indigo; font-style: italic}
    /*oblique: 斜的，倾斜，不光明正大的*/
    80%{ font-size: 32px; color: blue; font-style: oblique}
    100%{ font-size: 33px; color: purple; font-style: normal}
  }
    .main{
        width: 80%;
        margin: 0 auto;
        height: 800px;/*修改自适应*/
        /*background-color: rgb(219, 179, 19);*/
    }
    .title{
        width: 100%;
        height: 38px;
        background-color: rgb(238,238,238);
        line-height: 38px;
    }
    .w100{
        width: 100%;
    }
    .h100{
        height: 100%;
    }
    .fl{
        float: left;
    }
    .t1{
        width: 15%;
        margin-left: 5%;
        margin-right: 2%;
    }
    .t2{
        width: 10%;
        margin-right: 1%;
        color:#FF0033;
    }
    
    .t3{
        width: 10%;
        margin-right: 2%;
        float: right;
        text-align: right;
    }
    .t4{
         width: 10%;
         margin-right: 1%;
         float: right;
         text-align: right;
    }
    #trumpet {
    font-size: 16px;
        color: #555;
    background: #fff;
        padding-top: 5px;
        border: 1px solid #fff;
    }
    #trumpet p span{
        color: #e23a3a;
    }
    #trumpet p{
        height: 30px;
    }
    .decorate{
        width: 100%;
        height: 100px;
    }
    .decoratelr{
        width: 15%;
        height: 100%;
        float: left;
    }
    .ke1{
        height: 50px;
        line-height: 50px;
        font-size: 2.2ex;
    }
    .ke2{
        height: 50px;
        line-height: 50px;
        font-size: 2.8ex;
        font-weight: 800;
        color: #FF0033;
    }
    .nav{
        height: 50px;
        width: 100%;
        background-color:rgb(223, 42, 42);
    }
    .chooseType{
        height: 100%;
        width: 13%;
        font-size: 2.4ex;
        color: aliceblue;
        font-weight: 600;
        background-color:rgb(201, 26, 26);
        text-align: center;
        line-height: 50px;
        margin-left: 2%;
        float: left;
    }
    .chooseType:hover{
        cursor: pointer;
    }
    .navbar{
        width: 85%;
        height: 50px;
        float: left;
    }
    .navsyml31{
        margin-left: 21%;
    }
    .navsyml1{
        margin-left: 5%;
    }
    
    .navsy{
        line-height: 50px;
        text-align: center;
        color: aliceblue;
        font-weight: 400;
        font-size: 2.6ex;
    }
    .cont{
        height: 600px;/*修改自适应*/
        width: 100%;
        /*background-color: rgb(144, 238, 90);*/
        margin-top: 2px;
    }
    .fir{
        width: 25%;
        height: 100%;
    }
    .contSecondChild{
        width: 40%;
        height: 100%;
        /*background-color: #FF0033;*/
        margin-left: 2%;
    }
    .contThirdChild{
        width: 30%;
        float: right;
        height: 100%;
    }
    .choosezl{
        width: 100%;
        height: 301px;
        background-color: #DDDDDD;       
        border-radius: 2%;
        padding-top: 1px;
    }
    .choosezlCh{
        height: 59px;
        width: 99%;
        margin: 0 0.5% 1px 0.5%;
        line-height: 59px;
        background-color: aliceblue;
        border-radius: 2%;
    }
    .lsimg{
        height: 76%;
        margin-top: 6px;
        margin-left: 8px;
    }
    .lsimgcon{
       width: 30%;
       float: left;
    }
    .lsimgtxt{
        line-height: 59px;
        margin-left: 4%;
        font-size: 2.4ex;
    }
    .lsimgl{
        width: 40%;
        float: right;
        color: #777777;
    }
</style>
